<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-01 09:12:45
 * @FilePath: /src/views/dataManagement/system/approve/components/approveItemDialog.vue
 * @LastEditTime: 2021-07-01 11:52:49
 * @LastEditors: luojiajun
-->
<template>
    <el-dialog title="数据表申请详情" :visible.sync="dialogVisible" :before-close="handleClose" width="970">
        <div class="approve-item-dialog">
            <el-form ref="form" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="申请账号" prop="approver">
                            <el-input v-model="form.userName" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="申请原因" prop="applyReason">
                            <el-input type="textarea" v-model="form.applyReason" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="申请详情" prop="realname">
                            <el-table :data="form.list" border>
                                <el-table-column label="表单名称" prop="tableName" align="center"></el-table-column>
                                <el-table-column label="表单名称(数据库)" prop="tableAlias" align="center"></el-table-column>
                                <el-table-column label="所属部门" prop="deptName" align="center"></el-table-column>
                                <el-table-column label="安全等级" prop="safeLevel" align="center"></el-table-column>
                                <el-table-column label="申请类型" prop="accessType" align="center">
                                    <template slot-scope="scope">
                                        <span>{{ $enum.ACCESS_TYPE_MAP[scope.row.accessType] || '-' }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <span slot="footer" class="approve-item-dialog__footer">
            <template v-if="form.status==2">
				<el-button type="primary" style="margin-right:10px;" @click="handleAudit(1)">通过</el-button>
                <!-- 驳回弹窗 -->
				<el-popover placement="top" width="356" v-model="rejectVisible">
					<p style="text-align: center;">备注</p>
					<el-input type="textarea" placeholder="填写驳回原因" v-model="comment" :autosize="{ minRows: 6}"></el-input>
					<div style="text-align: center; margin:20px 0 0">
						<el-button type="primary" @click="handleAudit(0)">确定</el-button>
						<el-button type="info" @click="rejectVisible = false">取消</el-button>
					</div>
					<el-button slot="reference">驳回</el-button>
				</el-popover>
				<el-button style="margin-left:10px;" @click="onClose">返回</el-button>
			</template>
			<template v-else>
				<el-button type="info" v-if="form.status==0" disabled>已驳回</el-button>
				<el-button type="info" v-else-if="form.status==1" disabled>已通过</el-button>
				<el-button style="min-width:84px;" @click="onClose">返回</el-button>
			</template>
        </span>
    </el-dialog>
</template>

<script>
import { getApply, auditApply } from "@/api/dataManagement/system/apply";

export default {
    name: 'approveTableDialog',
    model: {
        prop: "visible",
        event: "change"
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        itemId: {
            type: [String, Number],
            default: 0
        },
    },
    data() {
        return {
            loading: false,
            form: {},
            rejectVisible: false,
            comment: ''
        };
    },
    watch: {
        currentId(value) {
            if (value && value > 0) {
                this.getApplyItem()
            }
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        },
        currentId: {
            get() {
                return this.itemId;
            },
            set(value) {
                this.$emit("update:itemId", value);
            }
        },
    },
    methods: {
        resetForm() {
            this.comment = ''
            this.rejectVisible = false
            this.currentId = 0
            this.form = {}
        },
        onClose() {
            this.resetForm()
            this.dialogVisible = false
        },
        handleClose(done) {
            this.resetForm()
            done()
        },
        getApplyItem() {
            if (this.loading) return false
            this.loading = true

            getApply(this.currentId).then(res => {
                this.form = res.data
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
        handleAudit(status) {
            if (this.loading) return false
            this.loading = true

            let params = {
                id: Number(this.form.id),
                status: Number(status)
            }
            if (status == 0) {
                params.comment = this.comment
            }
            
            auditApply(params).then(res => {
                if (res.code == 200) {
                    this.msgSuccess("操作成功");
                    this.onClose()
                    this.$emit("success", true);
                }
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.approve-item-dialog {
    &__footer {
        display: flex;
        justify-content: center;
    }
}
</style>